* {
  /*初始化 不同浏览器默认margin padding值不同 初始化方便同一效果*/
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
  /*取消li标签前的圆点*/
}

a {
  text-decoration: none;
  /*取消a标签下划线*/
}

.carousel {
  width: 600px;
  height: 300px;
  margin: 0 auto;
  /*设置居中*/
  background-color: #444;
  position: relative;
  /*相对定位*/
  overflow: hidden;
  /*超出部分隐藏,清除浮动*/
}

/* 1.轮播图 */
.carousel-imgs img {
  width: 600px;
  /*每一张图片的宽高和显示面板的宽高相同*/
  height: 300px;
}

.carousel-imgs li {
  float: left;
}

.carousel-imgs {
  width: 9999px;
  /*li设置浮动 增加ul的宽度 让图片全部显示在一行*/
}

/* 2.控制器 */
.prev,
.next {
  width: 45px;
  height: 45px;
  position: absolute;
  /*绝对定位，脱离文档流 它相对于position:relative定义的元素位置为(0,0)进行定位 否则以左上角(0,0)位置进行定位*/
  top: 50%;
  /*离顶部的距离*/
  margin-top: -16px;
  /*设置位置让其处于合适位置*/
}

.prev {
  background-image: url(img/prev.jpg);
  left: 10px;
  /*离左边的距离*/
}

.next {
  background-image: url(img/next.jpg);
  right: 10px;
  /*离右边的距离*/
}

/* 3.计数器 */
.count {
  width: 600px;
  height: 10px;
  position: absolute;
  /*绝对定位*/
  bottom: 20px;
  /*离下端的距离*/
}

.count ul {
  width: 60px;
  /* height: 10px; 不设置高度 可以去掉背景色*/
  margin: 0 auto;
  /*居中*/
  background-color: gray;
}

.count ul li {
  width: 10px;
  height: 10px;
  cursor: pointer;
  /*将鼠标形状设为手性*/
  background-color: pink;
  opacity: 0.5;
  /*不透明度，取值范围：[0-1]之间的一个数，可以是小数*/
  float: left;
  margin-right: 10px;
  border-radius: 50%;
  /*设置圆角*/
}

.count .active {
  background-color: greenyellow;
  opacity: 1;
}
